<template>
  <div class="LeftBottomWrap">
    <dv-charts :option="option" style="height:444px" />
  </div>
</template>

<script>
import { getLeftBottom } from "../assets/api/api";
export default {
  data() {
    return {
      timer: null,
      leftbottomdata: [],
      conf: {
        yAxis: {
          splitNumber: 4,
          splitLine: {
            show: true,
            style: {
              stroke: "#3b95d2",
              lineWidth: 2,
            },
          },
          name: "",
          data: "value",
          axisLine: {
            style: {
              stroke: "#3b95d2",
              lineWidth: 2,
            },
          },
          axisLabel: {
            style: {
              fill: "#3b95d2",
              fontSize: 26,
              rotate: 0,
            },
          },
        },
        xAxis: [
          {
            data: [],
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
          {
            data: [],
            axisLine: {
              style: {
                stroke: "#3b95d2",
                lineWidth: 1,
              },
            },
            axisLabel: {
              style: {
                fill: "#3b95d2",
                fontSize: 26,
                rotate: 0,
              },
            },
          },
        ],
        legend: {
          top: 32.5,
          right: 90,
          data: [
            {
              name: "失败",
              color: "#e23af5",
            },
            {
              name: "成功",
              color: "#6dcde6",
            },
          ],
          textStyle: {
            fontFamily: "Arial",
            fill: "#3b95d2",
          },
          iconHeight: 14,
          iconWidth: 14,
        },
        series: [
          {
            name: "失败",
            data: [],
            type: "bar",
            gradient: {
              color: ["#9837dd", "#e23af5"],
            },
          },
          {
            name: "成功",
            data: [],
            type: "bar",
            gradient: {
              color: ["#38a0d6", "#6dcde6"],
            },
          },
          {
            name: "失败1",
            data: [],
            type: "bar",
            gradient: {
              color: ["rgba(152,55,221, .2)", "rgba(226,58,245, .2)"],
            },
            xAxisIndex: 1,
          },
          {
            name: "成功1",
            data: [],
            type: "bar",
            gradient: {
              color: ["rgba(56,160,214, .2)", "rgba(109,205,230, .2)"],
            },
            xAxisIndex: 1,
          },
        ],
      },
    };
  },
  created() {
    this.fetchData();
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  computed: {
    option() {
      let faildata =
        (this.leftbottomdata[0] && this.leftbottomdata[0].fail) || [];
      let successdata =
        (this.leftbottomdata[0] && this.leftbottomdata[0].success) || [];
      let max = Math.max.apply(null, faildata.concat(successdata));
      let len = faildata && faildata.length;
      let max2 = max + max * 0.2;
      let bg = [];
      for (let i = 0; i < len; i++) {
        bg.push(max2);
      }
      let opt = JSON.parse(JSON.stringify(this.conf));
      opt.xAxis[0].data =
        this.leftbottomdata[0] && this.leftbottomdata[0].xaxis;
      opt.xAxis[1].data =
        this.leftbottomdata[0] && this.leftbottomdata[0].xaxis;
      opt.series[0].data = faildata;
      opt.series[1].data = successdata;
      opt.series[2].data = bg;
      opt.series[3].data = bg;
      opt.yAxis.max = max2;
      return opt;
    },
  },
  methods: {
    fetchData() {
      getLeftBottom().then((res) => {
        this.leftbottomdata = res.data.result;
      });
    },
  },
};
</script>

<style>
.LeftBottomWrap {
  padding-top: 20px;
}
</style>
